// @preview-file on clear nolog
//改进空间：字幕动画
import { React, toNode, useRef } from 'DoraX';
import { Color, Label, Node, Size, Sprite, TextAlign, Vec2, sleep, thread } from 'Dora';
import { Illustration } from 'Script/config'
export interface DialogNode {
	node: Node.Type;
	setname: (this: void, name1: string) => void;
	setcontent: (this: void, text1: string) => void;
	//typecontent: (this: void, text1: string, interval?: number) => void;
	setcolor: (this: void, color1: Color.Type) => void;
	setillustration: (this: void, illustration1: Illustration) => void;
}

export interface DialogProps {
	name?: string;
	illustration?: Illustration;
	text?: string;
	color?: Color.Type;
}


export const Dialog = (props: DialogProps) => {
	const {
		name = "",
		illustration = Illustration.wu,
		text = "",
		color=Color(0xff000000)
	} = props;
	const root = Node();
	
	const dialogbox = Sprite("Image/duihuakuang/duihuakuang_chang.png");
	if (dialogbox) {
		dialogbox.position = Vec2(0, 0);
		dialogbox.addTo(root);
	}

	let ill = Sprite(illustration);
	if (ill) {
		ill.size = Size(400, 400);
		ill.position = Vec2(450, -160);
		ill.addTo(root);
	}
	const namelabel = Label("sarasa-mono-sc-regular", 30);
	if (namelabel) {
		namelabel.text = name;
		namelabel.color = color;
		namelabel.position = Vec2(-390, -190);
		namelabel.addTo(root);
	}
	const content = Label("sarasa-mono-sc-regular", 30);
	if (content) {
		content.text = text;
		content.position = Vec2(0, -290);
		content.textWidth = 1000;
		content.color = color;
		content.alignment=TextAlign.Left;
		content.addTo(root);
	}

	const setname = (name1: string) => {
		if (namelabel) {
			namelabel.text = name1;
		}
	}
	
	const setcontent = (text1: string) => {
		if (content) {
			content.text = text1;
		}
	}

	/*const setcontent = (text1: string, interval: number = 0.1) => {
    if (!content) return;
      thread(function* () {
        content.text = ""; // 清空
        for (let i = 0; i < text1.length; i++) {
          content.text += text1[i];
          yield sleep(interval); // 每字间隔
        }
    });
  };*/

	const setcolor = (color1: Color.Type) => {
		if (content) {
			content.color = color1;
		}
	}
	const setillustration = (illustration1: Illustration) => {
		if (ill) {
			ill.removeFromParent();
			ill = Sprite(illustration1);
			if (ill) {
				ill.size = Size(400, 400);
				ill.position = Vec2(350, -160);
				ill.addTo(root);
			}
		}
	}
	const dialogueNode: DialogNode = { node: root, setname, setcontent, setcolor, setillustration };
	return dialogueNode;
}